<template>
	<view class="pages exam">
		<my-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">驾考宝典</block>
		</my-header>
        <view class="begin col" v-show="cur==0">
            <view class="start" @click="begin()">开始</view>
        </view>
        <view class="main" v-show="cur==index&&index>0" v-for="(item,index) in examList" :key="index">
            <view class="head row">
                <view class="key">题目</view>
                <view class="No"> <text class="page">{{index}}</text>/{{examList.length-1}}</view>
            </view>
            <view class="title">{{item.question}}</view>
            <image v-show="item.url" :src="item.url" mode="" />
            <view class="daan">
                <view class="a row" @click="dati(index,1)" 
                :class="item.daan!=1?'aas':item.daan==item.answer?'success':'error'"
                :hover-class="is_tips?'no_top':item.answer==1?'success':'error'" >
                    A.{{item.item1}}
                </view>
                <view class="b row" @click="dati(index,2)"
                :class="item.daan!=2?'':item.daan==item.answer?'success':'error'"
                :hover-class="is_tips?'no_top':item.answer==2?'success':'error'">
                    B.{{item.item2}}
                </view>
                <view class="c row" v-if="item.item3" @click="dati(index,3)" 
                :class="item.daan!=3?'':item.daan==item.answer?'success':'error'"
                :hover-class="is_tips?'no_top':item.answer==3?'success':'error'">
                    C.{{item.item3}}
                </view>
                <view class="d row" v-if="item.item4" @click="dati(index,4)" 
                :class="item.daan!=4?'':item.daan==item.answer?'success':'error'"
                :hover-class="is_tips?'no_top':item.answer==4?'success':'error'">
                    D.{{item.item4}}
                </view>
            </view>
            <view class="handle row">
                <view class="last row" @click="last()">
                    <view class="cuIcon-back"></view>
                    上一题
                </view>
                <!-- <view class="chack">查看答案</view> -->
                <view class="next row" @click="next(item)">
                    下一题
                    <view class="cuIcon-right"></view>

                </view>
            </view>
            <view class="daan" v-if="item.daan">
                <text class="key" style="font-size:16px;">答案：</text>
                {{item.answer==1?item.item1:item.answer==2?item.item2:item.answer==3?item.item3:item.answer==4?item.item4:"此题有误，请提交反馈"}}
            </view>
            <view class="explains" v-if="item.daan">
                <rich-text :nodes="key+item.explains"></rich-text>
            </view>
        </view>
        <view class="over" v-show="cur==examList.length">
            <view class="item">
                当前： {{cur}}
            </view> 
            <view class="item">
                长度： {{examList.length}}
            </view>
            <view class="item">
                最后显示：{{cur==examList.length}}
            </view>
            <view class="daans row">
                <view class="daan row" v-for="(item,index) in examList" :key="index" v-show="index>0" 
                    :class="!item.daan?'no':item.daan==item.answer?'success':'error'">
                    {{daanList[item.daan]||"未选择"}}
                </view>
            </view>
            <view class="recover" @click="begin()">重新开始</view>
        </view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                user:{},
				examList:[
                ],
                daanList:["","A","B","C","D"],
                cur:-1,
                is_tips:true,
                is_auto:false,
                is_dian:true,
                key:"<span style='font-weight: 900;font-size:16px;'>题解：</span>"
			}
		}, 
		onLoad(){
            this.initData()
            // this.get_userInfo()
            this.is_auto=true
        },
        onHide(){
            uni.$err("隐藏")
        },
        onUnload(){
            uni.$err("卸载")

        },
		methods: {
			async initData(){
				const res=await uni.$request({
				},"api/driverExam/getExamList")
                this.examList=[
                    {},
                    ...res.data.examList
                ]
                this.cur=0
                this.begin()
            },
            begin(){
                for (let i = 0; i < this.examList.length; i++) {
                    const element = this.examList[i];
                    element.daan=""
                    this.examList.splice(i,1,element)
                }
                
                
                this.cur=1
            },
            dati(index,i){
                let exam=this.examList[index]
                let cur=this.cur
                exam.daan=i
                this.examList.splice(index,1,exam)
                // if (this.is_dian) {
                    this.is_dian=false
                    if (this.is_auto&&exam.daan==exam.answer) {
                        setTimeout(() => {
                            this.cur+=1
                            this.is_dian=true
                        }, 2000);
                    }
                // }
                
            },
            async get_userInfo(){
				const res=await uni.$request({
                },"api/user/get_userInfo")
                this.user=res.data
			},
			next(item){
                if (item.daan) {
                    this.cur+=1
                } else{
                    uni.$err("该题还未作答") 
                }

            },
            last(){
                this.cur-=1
            }
			
			
		}
	}
</script>

<style lang="scss">
	@import "./main";
</style>